<template>
  <view class="work-container">
    <view style="display: flex;">
       <button  @click="toggle('a')" style="flex:1;background-color: white;">产品筛选</button>
 <button  @click="toggle('b')" style="flex:1;background-color: white;">金融机构</button>
    </view>

			<uni-popup ref="popup" background-color="#fff" >
   <view class="container">
     <!-- 贷款额度 -->
     <view class="section">
       <text class="title">贷款额度</text>
       <view class="options-grid">
         <view 
           v-for="(item, index) in amounts" 
           :key="index"
           :class="['option', selectedAmount.value === item.value ? 'option-active' : '']"
           @tap="selectedAmount.value = item.value;selectedAmount.creditMin = item.creditMin;selectedAmount.creditMax = item.creditMax;"
         >
           {{ item.label }}
         </view>
       </view>
     </view>
 
     <!-- 贷款期限 -->
     <view class="section">
       <text class="title">贷款期限</text>
       <view class="options-grid">
         <view 
           v-for="(item, index) in durations" 
           :key="index"
           :class="['option', selectedDuration.value === item.value ? 'option-active' : '']"
           @tap="selectedDuration.value = item.value;selectedDuration.deadlineMin = item.deadlineMin;selectedDuration.deadlineMax = item.deadlineMax;"
         >
           {{ item.label }}
         </view>
       </view>
     </view>
 
     <!-- 担保方式 -->
     <view class="section">
       <text class="title">担保方式</text>
       <view class="options-grid">
         <view 
           v-for="(item, index) in methods" 
           :key="index"
           :class="['option', selectedMethod === item.value ? 'option-active' : '']"
           @tap="selectedMethod = item.value"
         >
           {{ item.label }}
         </view>
       </view>
     </view>
   </view>
            <view style="display: flex;">
              <button @click="resetOptions" style="width: 50%;">重置</button>
              <button type="primary" @click="confirmOptions" style="width: 50%;">确定</button>
            </view>
			</uni-popup>
  	
    <uni-popup ref="popup2" background-color="#fff" >
   <view class="container" style="max-height: 60vh; overflow-y: auto;">
     <!-- 贷款额度 -->
     <view class="section">
       <text class="title">金融机构</text>
       <view class="options-grid"> 
         <view 
           v-for="(item, index) in bankList" 
           :key="index"
           :class="['option', selectedBank === item.bankId ? 'option-active' : '']"
           @tap="selectedBank = item.bankId"
         >
         <view class="">
            <img :src="`${baseUrl}${item.bankIcon}`" style="  display: block;margin: 0 auto;max-width: 30%; max-height: 30%;">
          {{ item.bankName }}
         </view>
        
         </view>
       </view>
     </view>
   </view>
          <view style="display: flex;">
            <button @click="resetOptions" style="width: 50%;">重置</button>
            <button type="primary" @click="confirmBankOptions" style="width: 50%;">确定</button>
          </view>
    </uni-popup>
      	
    <!-- 轮播图 -->
   <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false"/>
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
<view style="font-family: '黑体'; font-size: 24px;margin-left: 10px;">热门产品</view>

<view class="card"  v-for="(item, index) in creditList" :key="index" @click="goToDetails(item.id)">
  <view class="card-header">
    <text style="font-family: '黑体'; font-size: 19px;margin-left: 10px; font-weight: bold;">{{item.creditName}}</text>
    <uni-icons type="arrow-right" size="25" ></uni-icons>
  </view>
  <view class="card-body">
    <view style="margin-top: 10px;"><text class="card-body-title">申请额度(万):</text><text  class="card-body-content">{{item.creditMin}}~{{item.creditMax}}</text></view>
    <view style="margin-top: 10px;"><text class="card-body-title">参考利率(%):</text><text class="card-body-content" style="color:black">{{item.rateMin}}~{{item.rateMax}}</text></view>
    <view style="margin-top: 10px;"><text class="card-body-title">申请期限(月):</text><text class="card-body-content" style="color:black">{{item.deadlineMin}}~{{item.deadlineMax}}</text></view>
  </view>
  <view class="card-footer" style="margin-top: 15px;margin-left: 10px;background-color:rgb(244,247,252);">
    <img :src="getBankIcon(item.bankName)" style="max-width: 10%; max-height: 10%;">
    <text style="font-size: 18px;margin-left: 15px; font-weight: bold;">{{item.bankName}}</text>
  </view>
</view>

    <!-- 宫格组件 -->
<!-- <uni-section title="系统管理" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false"  >
        <uni-grid-item >
          <view class="grid-item-box" @click="changeUser">
            <uni-icons type="person-filled" size="30"></uni-icons>
            <text class="text">用户管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="changeArea">
            <uni-icons type="staff-filled" size="30"></uni-icons>
            <text class="text">区域管理</text>
          </view>
        </uni-grid-item>
         <uni-grid-item>
          <view class="grid-item-box"  @click="changeInf">
            <uni-icons type="color" size="30"></uni-icons>
            <text class="text">基础设施管理</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view> -->
  </view>
</template>

<script>
  import config from '@/config'
 
  import {
listBank
  } from "@/api/bank/bank.js";
  import {
listCredit,searchCredit
  } from "@/api/credit/credit.js";
  export default {
    data() {
      return {
         baseUrl :config.baseUrl,
         selectedAmount: {
           value:'',
           creditMin:'',
           creditMax:''
         },
              selectedDuration: {
                value:'',
                deadlineMin:'',
                deadlineMax:''
              },
              selectedMethod: '',
              selectedBank: '',
              amounts: [
                { label: '100万以下', value: '0-100' ,creditMin:'0',creditMax: '100' },
                { label: '100-200万', value: '100-200' ,creditMin:'100',creditMax: '200'},
                { label: '200-500万', value: '200-500',creditMin:'200',creditMax: '500' },
                { label: '500-1000万', value: '500-1000' ,creditMin:'500',creditMax: '1000'},
                { label: '1000-5000万', value: '1000-5000',creditMin:'1000',creditMax: '5000' },
                { label: '5000万以上', value: '5000',creditMin:'5000',creditMax: '50000' }
              ],
              
              durations: [
                { label: '6个月以下', value: '0-6' },
                { label: '6-12个月', value: '6-12' },
                { label: '12-24个月', value: '12-24' },
                { label: '24-36个月', value: '24-36' },
                { label: '36个月以上', value: '36' }
              ],
              
              methods: [
                { label: '抵押', value: 'mortgage' },
                { label: '质押', value: 'pledge' },
                { label: '保证', value: 'guarantee' },
                { label: '信用', value: 'credit' }
              ],
          queryParams: {
            money:null,
            deadline:null,
            danbao:null
            },
        current: 0,
        accordionVal:'1',
        swiperDotIndex: 0,
        creditList:[],
        bankList:[],
        data: [{
            image: '/static/images/banner/banner05.jpg'
          },
        ],  
      }
    },
    methods: {
       getBankIcon(bankName) {
            const bank = this.bankList.find((b) => b.bankName === bankName);
            return bank?`${this.baseUrl}${bank.bankIcon}`  : ''; // 如果找到了对应的银行信息，返回 bankIcon，否则返回空字符串
          },
          confirmBankOptions() {
            const selectedData = {
              bankId: this.selectedBank,
            }
            this.searchList(selectedData);
            this.$refs.popup2.close()
          },
          confirmOptions() {
            const selectedData = {
              creditMin: this.selectedAmount.creditMin,
              creditMax: this.selectedAmount.creditMax,
              deadlineMin:this.selectedAmount.deadlineMin,
              deadlineMax:this.selectedAmount.deadlineMax,
              // duration: this.selectedDuration,
              // method: this.selectedMethod
            }
            this.searchList(selectedData);
            console.log('已选择：', selectedData)
            this.$refs.popup.close()
          },
          resetOptions() {
            // 重置所有选项
            this.selectedBank= ''
         this.selectedAmount={
           value:'',
           creditMin:'',
           creditMax:''
         }
              this.selectedDuration= {
                value:'',
                deadlineMin:'',
                deadlineMax:''
              }
            this.selectedMethod = ''
          },
      async  getList() {
       try {
                 const response = await listCredit();
                 this.creditList = response.data.records;
             } catch (error) {
                 console.error("获取信贷失败：", error);
             }
       },
       async  searchList(bankId) {
        try {
                  const response = await searchCredit(bankId);
                  this.creditList=[];
                  this.creditList = response.data.records;
              } catch (error) {
                  console.error("查询信贷失败：", error);
              }
        },
       async  getbankList() {
        try {
                  const response = await listBank();
                  this.bankList = response.data.records;
              } catch (error) {
                  console.error("获取银行数据失败：", error);
              }
        },
      			toggle(a) {
              if(a=='a'){ this.$refs.popup.open('top')}else{this.$refs.popup2.open('top') }
      			},
      clickBannerItem(item) {
        console.info(item)
      },
      goToDetails(id){
         uni.navigateTo({
                url: `/pages/work/detail/detail?id=${id}` 
              });
       // this.$tab.redirectTo(`/pages/work/detail/detail`)
      },
      changeSwiper(e) {
        this.current = e.detail.current
      },
      changeUser(e) {
        this.$tab.redirectTo(`/pages/work/collect_user/collect_user`)
        // this.$modal.showToast('模块建设中~')
      },
      changeArea(e) {
        this.$tab.redirectTo(`/pages/work/area/area`)
        // this.$modal.showToast('模块建设中~')
      },
      changeInf(e){
        this.$tab.redirectTo(`/pages/work/infrastructure/infrastructure`)
      },
    },
    onLoad: function() {
      this.getList()
      this.getbankList()
      // console.log(this.creditList)
    }
  }
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    // background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */
  uni-data-checkbox {
      width: 50%;
  }
  .container {
    padding: 30rpx;
  }
  
  .section {
    margin-bottom: 40rpx;
  }
  
  .title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
  }
  
  .options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    margin-top: 8px;
  }
  
  .option {
    padding: 20rpx;
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #333;
  }
  
  .option-active {
    background-color: #2979ff;
    color: #ffffff;
  }
  
  .confirm-btn {
    margin-top: 40rpx;
    background-color: #2979ff;
    color: #ffffff;
    padding: 24rpx;
    text-align: center;
    border-radius: 8rpx;
    font-size: 32rpx;
  }
.card-body-title{
  font-size: 17px;margin-left: 10px;color:rgb(132, 132, 132);
}
.card-body-content{
  font-size: 21px;margin-left: 10px;color:blue; font-weight: bold;
}
.box {
  display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 15px;
  // grid-template-columns: repeat(2, 1fr); /* 一行两列，每列宽度相等 */
  // grid-gap: 10px; /* 列间距 */
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 185px;
  margin: 0 5px;
  border-radius: 5px;
}
  .card {
    background-color: white;
    // border: 1px solid #ccc;
    border-radius:15px;
    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 95%;
    margin: 10px;
    padding: 10px;
    font-family: Arial, sans - serif;
  }
  
  .card-header {
    border-bottom: 1px solid #ccc;
     display: flex;
    justify-content: space-between;
     align-items: center;
    padding-bottom: 10px;
  }
  
  .card-body view {
    margin: 5px 0;
  }
  
  .card-footer {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
  
  .card-footer image {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }

    .text {
      width: 100px;
    }

  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .swiper {
    height: 300rpx;
  }

  .swiper-box {
    width: 99%;
     // height: 70%;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 200rpx;
    line-height: 300rpx;
  }

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }

    .image {
      width: 100%;
      height: 100%;
    }
   
  }
</style>
